body {
  background: #f1f1f1;
}

body main {
  position: absolute;
  top: 50%;
  left: 50%;
}

body main button {
  border: none;
  margin: 20px;
  padding: 24px;
  width: 220px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: white;
  background-size: 200%;
  transition: .6s;
}

body main button:hover {
  background-position: right;
}

.btn1 {
  background-image: linear-gradient(to left, #ffc312, #ee5a24, #ffc312);
}

.btn2 {
  background-image: linear-gradient(to left, #c4e538, #009432, #c4e538);
}

.btn3 {
  background-image: linear-gradient(to left, #12cbc4, #0652dd, #12cbc4);
}

.btn4 {
  background-image: linear-gradient(to left, #fda7df, #9980fa, #fda7df);
}
